<template>
  <div class="all">
    <Nav :leftShow="left_show" :leftName="left_name" :rightName="right_name" :titleName="title_name">
    </Nav>
    <van-form validate-first @failed="onFailed">
      <!-- 通过 pattern 进行正则校验 -->
      <van-field v-model="value1" name="pattern" placeholder="请输入兑换码" />
      <van-field class="v2" v-model="value2" name="captcha_code" placeholder="验证码">
        <template #right-icon>
          <div>
            <img :src="imgUrl" alt="">
          </div>
        </template>
        <template #button>
          <div @click="changeImg">
            <div class="unlook">看不清</div>
            <div class="hyz">换一张</div>
          </div>
        </template>
      </van-field>
      <van-button class="submit" round block type="info" native-type="submit" @click="duihuan">
        兑换
      </van-button>
    </van-form>
  </div>
</template>

<script>
  import Nav from "@/components/Nav.vue";
  export default {
    name: "ConvertRed",
    data() {
      return {
        left_show: false,
        left_name: '空',
        title_name: '兑换红包',
        right_name: '',
        value1: '',
        value2: '',
        pattern: /\d{6}/,
        captcha_code: "",
        imgUrl: "",

      }
    },
    components: {
      Nav,
    },

    // beforeRouteEnter(to, from, next) {
    //   next(vm => {
    //     vm.changeIsTabbar(false);
    //     vm.changeCityName("兑换红包");

    //   });
    // },
    methods: {
      validator(val) {
        return /1\d{10}/.test(val);
      },
      onFailed(errorInfo) {
        console.log('failed', errorInfo);
      },
      changeImg() {
        this.axios.post('https://elm.cangdu.org/v1/captchas').then(res => {
          // console.log(res);
          this.imgUrl = res.data.code;
        });
      },
      duihuan() {
        console.log(11111111)
        this.$dialog.alert({
          message: '无效的兑换码',
        }).then(() => {
          // on close
        });
      },
    },
    created() {
      this.axios.post('https://elm.cangdu.org/v1/captchas').then(res => {
        // console.log(res);
        this.imgUrl = res.data.code;
      });
    },
  }
</script>

<style lang="less" scoped>
  .all {
    margin-top: 60px;
  }

  .van-field {
    width: 90%;
    border-radius: 5px;
    margin-left: 5%;
    margin-top: 20px;
    font-size: 18px;
  }

  #right-icon {
    margin-left: 20px;
  }

  .hyz {
    color: #3190E8;
    margin-top: 15px;
  }

  .unlook {
    font-size: 15px;
  }

  .submit {
    width: 88%;
    margin-left: 25px;
    height: 40px;
    border-radius: 5px;
    border: none;
    background-color: rgb(76, 217, 100);
    margin-top: 20px;
  }
</style>